<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
	<base href="<%=basePath%>">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" href="images/favorite.ico" />
	<link rel="stylesheet" href="css/schedule_nav.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="css/note.css" type="text/css" charset="utf-8" />
	<title>日志管理</title>
	<link type="text/css" href="" rel="stylesheet"/>  
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type='text/javascript'src='plugin/artdialog/artDialog.js?skin=default'></script>
	<script type="text/javascript">
	 $(function(){ 
		　
		//top navigation  
		var d = 300;
		$('#navigation a').each(function() {
			$(this).stop().animate({
				'marginTop' : '-80px'
			}, d += 150);
		});

		$('#navigation > li').hover(function() {
			$('a', $(this)).stop().animate({
				'marginTop' : '-2px'
			}, 200);
		}, function() {
			$('a', $(this)).stop().animate({
				'marginTop' : '-80px'
			}, 200);
		});
		
		}); 	
	</script>
	<style type="text/css">
		/*表格样式*/
table {  
*border-collapse: collapse; /* IE7 and lower */  
border-spacing: 0;  
width: 100%;  
}  
  
.bordered {  
border: solid #ccc 1px;  
-moz-border-radius: 6px;  
-webkit-border-radius: 6px;  
border-radius: 6px;  
-webkit-box-shadow: 0 1px 1px #ccc;  
-moz-box-shadow: 0 1px 1px #ccc;  
box-shadow: 0 1px 1px #ccc;  
}  
  
.bordered tr:hover {  
background: #fbf8e9;  
-o-transition: all 0.1s ease-in-out;  
-webkit-transition: all 0.1s ease-in-out;  
-moz-transition: all 0.1s ease-in-out;  
-ms-transition: all 0.1s ease-in-out;  
transition: all 0.1s ease-in-out;  
}  
  
.bordered td, .bordered th { 
/* 
border-left: 1px solid #ccc;  
*/
border-top: 1px solid #ccc;  
padding: 10px;  
text-align: center;  
}  
  
.bordered th {  
background-color: #dce9f9;  
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));  
background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);  
background-image: linear-gradient(top, #ebf3fc, #dce9f9);  
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
border-top: none;  
text-shadow: 0 1px 0 rgba(255,255,255,.5);  
}  
  
.bordered td:first-child, .bordered th:first-child {  
border-left: none;  
}  
  
.bordered th:first-child {  
-moz-border-radius: 6px 0 0 0;  
-webkit-border-radius: 6px 0 0 0;  
border-radius: 6px 0 0 0;  
}  
  
.bordered th:last-child {  
-moz-border-radius: 0 6px 0 0;  
-webkit-border-radius: 0 6px 0 0;  
border-radius: 0 6px 0 0;  
}  
  
.bordered th:only-child{  
-moz-border-radius: 6px 6px 0 0;  
-webkit-border-radius: 6px 6px 0 0;  
border-radius: 6px 6px 0 0;  
}  
  
.bordered tr:last-child td:first-child {  
-moz-border-radius: 0 0 0 6px;  
-webkit-border-radius: 0 0 0 6px;  
border-radius: 0 0 0 6px;  
}  
  
.bordered tr:last-child td:last-child {  
-moz-border-radius: 0 0 6px 0;  
-webkit-border-radius: 0 0 6px 0;  
border-radius: 0 0 6px 0;  
}  
  
/*----------------------*/  
/*操作选项css*/
	#header a {
	display: block;
	font-family: Pictoss;
	font-size: 20px;
	padding: 2px 30px 48px 20px;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(10, 50, 74)), to(rgb(8, 40, 59)));
	width: 20px;
	text-decoration: none;
	overflow: hidden;
	text-shadow: 0 -1px 1px black;
	border-radius: 50px;
	color: white;
	height: 20px;
	white-space: nowrap;
	margin-bottom: 5px;
	border: 5px solid rgb(20, 101, 149);
	-webkit-transition: all ease-in-out .3s;
	-webkit-background-clip: padding-box;
	}
    
    
#header a span.hidden {
    font-family: 'Lucida Grande';
    font-size: 23px;
    font-weight: bold;
    margin-top: 6px;
    margin-left: 20px;
}



#header a:hover {
    width: 200px;
}

#header a:active {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#08283b), to(#0a324a));
    -webkit-box-shadow: inset 0 0 2px #222;
}
#header img {
	max-width: 50px;   
    height:auto;  
    margin: 10px 0 0 -8px;
}
	input {
		margin-left: auto;
		margin-right: auto;
	}
	#content img {
		width:30px;
		height:30px;
	}
	</style>
</head>
<body>
	<div id="topnav">
		<ul id="navigation">
			<li class="home"><a href="main_page.action"><span>主页</span></a></li>
			<li class="about"><a href="schedule/schedule_page.action"><span>日程秘书</span></a></li>
			<li class="search"><a href=""><span>文档管理</span></a></li>
			<li class="photos"><a href=""><span>个人相册</span></a></li>
			<li class="rssfeed"><a href=""><span>阅读器</span></a></li>
			<li class="podcasts"><a href=""><span>账目理财</span></a></li>
			<li class="contact"><a href=""><span>联系管理员</span></a></li>
		</ul>
	</div>
	<div id="top">
		<div id="overlay-bg">
			<div id="pagewrap">
				<div id="title"> 
					<h1 id="site-logo"><a href="note/note_page.action">日常笔记</a></h1> 
					<h2 id="site-description">不管是记录日常生活的点点滴滴，还是收藏一些好的网文，都是不错的选择</h2>	
				</div> 
				<div id="header">
					 <a href="javascript:void(0)" onclick="adddir()"><img src="images/category.png"><span class="hidden">添加目录</span></a>
					 <a href="note/note_page.action"><img src="images/notes.png"><span class="hidden">返回笔记</span></a>	  			
				<!-- 
					<nav>
						<ul class="social" id="css3">
							<li class="enote">
								<a href="note/editNote_page.action"><strong>添加文章</strong></a>
							</li>
							<li class="edir">
								<a href="note/editDir_page.action"><strong>编辑目录</strong></a>
							</li>
						</ul>
					</nav>
				 -->
				</div>
				<div id="body">
					<div id="content">									
						<h2>日志目录表列</h2>  
						<table id="table" class="bordered">  
						<thead>  			  
						<tr>  
						<th>#</th>  
						<th>目录名</th>  
						<th>创建时间</th>
						<th>笔记</th>
						<th>编辑</th>
						<th>删除</th>
						</tr>  
						</thead>
						<s:iterator value="session.dirs" id="c">
							<tr >
								<td></td> 
								<td id="<s:property value="#c.id"/>"><s:property value="#c.dirName"/></td>  			  
								<td><s:date name="#c.createTime" format="yyyy年MM月dd日" /></td> 
								<td><s:property value="#c.nCount"/></td>
								<td><img style="cursor:pointer" src="images/edit.png" onclick="edit(<s:property value="#c.id" />);"></td>
								<td><img style="cursor:pointer" src="images/delete.png"  onclick="deleteh(<s:property value="#c.id" />,this)"></td>
							</tr>
						</s:iterator>  			  
						</table>  			  
						<br><br>  						         
					</div>
					<!--/content -->
				</div>
			</div>
		</div>
	</div>
</body>
	<script type="text/javascript">
  	var rowCount;
  	 $(document).ready(function(){	
  		 rowCount = $("#table tr").size();
  	     for(var i = 1;i < rowCount; i++) {
  	    	$("#table tr:eq("+i+") td:nth-child(1)").html(i); 
  	     }
  	  
  	 });
  	
	function edit(categoryId) {
		//创建文本框对象
        var inputobj = $("<input type='text'>");
        //获取当前点击的单元格对象
        var tdobj = $("#"+categoryId);
        var width = tdobj.width();
        //获取单元格中的文本
        var text = tdobj.html();   
        if(tdobj.children("input").length>0){
            return false;
        }   
        //清空单元格的文本
        tdobj.html("");
           //如果当前单元格中有文本框，就直接跳出方法
        //注意：一定要在插入文本框前进行判断
        inputobj.css("border","0")
                .css("font-size",tdobj.css("font-size"))
                .css("font-family",tdobj.css("font-family"))
                .css("background-color",tdobj.css("background-color"))
                .css("color","#C75F3E")
                .width(width)
                .val(text)
                .appendTo(tdobj);
        inputobj.trigger("focus").trigger("select");
          //阻止文本框的点击事件
        inputobj.blur(function(){  
           tdobj.html(text);
        });  
        inputobj.click(function(){
            return false;
        });
        //处理文本框上回车和esc按键的操作
        //jQuery中某个事件方法的function可以定义一个event参数，jQuery会屏蔽浏览器的差异，传递给我们一个可用的event对象
        inputobj.keyup(function(event){
            //获取当前按键的键值
            //jQuery的event对象上有一个which的属性可以获得键盘按键的键值
            var keycode = event.which;
            //处理回车的情况
            if(keycode==13){
                //获取当前文本框的内容
                var inputtext = $(this).val();
                //将td的内容修改成文本框中的内容
                //post数据到后台
                $.ajax({
					url: 'note/rnDir_do.action',
					type: 'POST',
					data:{"dirId":categoryId,"dirName":inputtext},
					dataType: 'json',
					timeout: 1000,
					beforeSend:function() {},
					success: function(result) {
						tip(result.info,"succeed");
						tdobj.html(inputtext);
					},
					error: function(){alert('提交服务器错误');},
					complete:function() {}
				});
            }
            //处理esc的情况
            if(keycode == 27){
                //将td中的内容还原成text
                tdobj.html(text);
            }
        });
	}
	
	function deleteh(categoryId,trId) {
		art.dialog({
		    id: 'testID',
		    drag: false,
		    resize: false,
		    lock: true,
		    background: '#600', // 背景色
		    opacity: 0.87,	// 透明度
		    icon:'warning',
		    content: '确认删除？',
		    button: [
		        {
		            name: '删除',
		            callback: function () {
		            	$.ajax({
		        			url: 'note/delDir_do.action',
		        			type: 'POST',
		        			data:{"dirId":categoryId},
		        			dataType: 'json',
		        			timeout: 1000,
		        			beforeSend:function() {},
		        			success: function(result) {
		        				if(result.info == 'y') {
		        					tip(result.info,'succeed');
		        					rowCount--;
			        				$(trId).parent().parent().remove();
			        				  for(var i = 1;i < rowCount; i++) {
			        			  	    	$("#table tr:eq("+i+") td:nth-child(1)").html(i); 
			        			  	   }
		        					
		        				}else {
		        					tip(result.info,'warning');
		        				}		        						        					  		    				
		        			},
		        			error: function(){alert('提交服务器错误');},
		        			complete:function() {}
		        		});
		            },
		            focus: true
		        },
		        {
		            name: '取消',
		            callback: function () {	            
		            }
		        }		      
		    ]
		});		
	}
	function adddir() {
  		art.dialog({
  		content:'目录名：<input id="dirName"/>',
  		button: [
        {
            name: '添加目录',
            callback: function () {
               var text = $("#dirName").val();
               if (text.length == 0) { 
               		tip('目录名不能为空！','warning');
               } else {
               		$.ajax({
					url: 'note/addDir_do.action',
					type: 'POST',
					data:{"dirName":text},
					dataType: 'json',
					timeout: 1000,
					beforeSend:function() {},
					error: function(){alert('服务器错误');},
					success: function(result) {
						tip(result.info,"succeed");
						var display = "<tr><td>"+rowCount+"</td><td id="+result.categoryId+">"+text
						+"</td><td>"+new Date().pattern("yyyy年MM月dd日")
						+"</td><td>0</td><td><img style=\"cursor:pointer\" src=\"images/edit.png\" onclick=\"edit("+result.categoryId
						+")\"></td><td><img style=\"cursor:pointer\" src=\"images/delete.png\" onclick=\"deleteh("+result.categoryId
						+",this)\"></td></tr>";					
						 $("#table").append(display);
						//$("#table tr:eq("+rowCount+")").after(display);
						//$("#table:first tbody tr:eq("+rowCount+")").after(display);
						rowCount++;						
						//$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table tr:eq("+rowCount+")")); 					
					},
					complete:function() {}
				});
               }
            },
            focus: true
        },
        {
            name: '取消',
            callback: function () {
                
            }
        }
    ]
    });
	}
	Date.prototype.pattern=function(fmt) {        
	    var o = {        
	    "M+" : this.getMonth()+1, //月份         
	    "d+" : this.getDate(), //日         
	    "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时         
	    "H+" : this.getHours(), //小时         
	    "m+" : this.getMinutes(), //分         
	    "s+" : this.getSeconds(), //秒         
	    "q+" : Math.floor((this.getMonth()+3)/3), //季度         
	    "S" : this.getMilliseconds() //毫秒         
	    };        
	    var week = {        
	    "0" : "/u65e5",        
	    "1" : "/u4e00",        
	    "2" : "/u4e8c",        
	    "3" : "/u4e09",        
	    "4" : "/u56db",        
	    "5" : "/u4e94",        
	    "6" : "/u516d"       
	    };        
	    if(/(y+)/.test(fmt)){        
	        fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));        
	    }        
	    if(/(E+)/.test(fmt)){        
	        fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);        
	    }        
	    for(var k in o){        
	        if(new RegExp("("+ k +")").test(fmt)){        
	            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));        
	        }        
	    }        
	    return fmt;        
	}
	function tip(content,icon) {
		art.dialog({
			id: 'testID',
			icon:icon,
			content: content
			});
			art.dialog({id: 'testID'}).title('2秒后关闭').time(2);
	}
</script>
</html>